<template>
  <div class="main flex-v">
    <div class="balanceOuterWrap">
      <div class="balanceTop">
        <headerBack></headerBack>
        <span :class="['banTitle', typer == 1 ? 'col1' : typer == 2 ? 'col2' : 'col3']">{{ typer == 1 ? '平衡策略' : typer == 2 ? '院校优先策略' : '专业优先策略' }}</span>
        <img class="topBg" :src="typer == 1 ? imgBg1 : typer == 2 ? imgBg2 : imgBg3" alt="" />
      </div>
      <universities></universities>
    </div>
  </div>
</template>

<script>
// import echarts from '@/plugins/echarts'
// import echarts from 'echarts'
import headerBack from '~/components/headerBack'
import universities from '~/components/UniversZj'
import { TransferDom, Popup } from 'vux'
import ls from 'store2'
import { setTimeout } from 'timers'

export default {
  head: {},
  directives: {
    TransferDom,
  },
  components: {
    headerBack,
    universities,
    Popup,
    // admissionLine
  },
  data() {
    return {
      preurl: '',
      gotitle: '',
      imgBg1: require('~/static/images/vol4.png'),
      imgBg2: require('~/static/images/vol5.png'),
      imgBg3: require('~/static/images/vol6.png'),
      typer: 0,
    }
  },
  created() {
    this.typer = this.$route.query.type
  },
  methods: {},

  mounted: function() {
    this.$visit(this.$route.path)
    this.$hideLoading()
    this.preurl = this.$store.state.presUrl
  },
}
</script>

<style scoped lang="less">
/deep/h4 {
  font-size: 0.4rem !important;
}

/deep/.vux-popup-dialog {
  background: none;
}
.balanceOuterWrap {
  width: 100%;
  min-height: 100vh;

  .balanceTop {
    z-index: 2;
    width: 100%;
    height: 2.6rem;
    // background: #fff;
    position: relative;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
    border-bottom-left-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    // background: url('~/static/images/volunteer_pic_profession_bg.png') no-repeat;
    background-size: cover;

    .topBg {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 3.67rem;
      height: 2.06rem;
    }

    .banTitle {
      display: block;
      height: 0.62rem;
      font-size: 0.44rem;
      font-weight: bold;

      line-height: 0.62rem;
      margin-left: 0.5rem;
      margin-top: 0.3rem;
    }

    .col1 {
      color: @mainColor;
    }

    .col2 {
      color: #fec03e;
    }

    .col3 {
      color: #5ab2f1;
    }
  }

  .balanceWrap {
    width: 7.5rem;
    min-height: 100vh;
    background: #fff;

    .balanceBox {
      width: 100%;
      height: auto;
      padding: 0.3rem 0rem;
      box-sizing: border-box;

      .blBar1 {
        width: 100%;
        height: 0.8rem;
        background: rgba(250, 250, 250, 1);
        border-radius: 0.1rem;
        padding: 0 0.2rem;
        box-sizing: border-box;

        .sp1 {
          height: 0.8rem;

          i,
          b,
          em {
            display: inline-block;
            vertical-align: middle;
          }

          i {
            width: 0.18rem;
            height: 0.25rem;
            background: rgba(241, 116, 103, 1);
            border-radius: 0.09rem;
          }

          b {
            font-size: 0.34rem;
            font-weight: bold;
            color: rgba(34, 34, 34, 1);
            line-height: 0.8rem;
            margin-left: 0.25rem;
          }

          em {
            line-height: 0.8rem;
            margin-left: 0.2rem;
            font-size: 0.3rem;
            font-weight: bold;
            color: rgba(187, 187, 187, 1);
          }
        }

        .imgIcon {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
}
</style>
